<!DOCTYPE html>
<html>

<head>
    <title>websocket.html</title>
    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html" charset="UTF-8">
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    <style>
        .blue {
            color: blue;
        }

        .red {
            color: red;
        }
        .left{
            float: left;
            margin-left: 50px;
        }
    </style>
</head>

<body>
    <div class="left">
        web 后端推送的全局消息
        <p id="response" class="blue"></p>

        <br>
    
    </div>
    <div class="left">
        web 后端推动的1 对 1 消息,因为后端 random%2 ，所以有有1 
        <select id="select">
            <option value="0">0</option>
            <option value="1">1</option>
            <option value="2">2</option>
        </select>
        <div class="red" id="one"></div>
        <button value="开始连接1对1" onclick="start()">开始开始连接1对1</button>
    </div>

    <!-- 独立JS -->
    <script type="text/javascript" src="../static/jquery-3.5.1.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/sockjs.min.js" charset="utf-8"></script>
    <script type="text/javascript" src="../static/stomp.min.js" charset="utf-8"></script>
    <script>
        var stompClient = null;

        function start() {
            var id = $("#select").val();
            console.log(id);
            if (id != null) {
                stompClient.subscribe("/user/"+id+"/queue/getResponse", function (response) {
                    $("#one").append("<p>"+JSON.parse(response.body)+"</p>")
                });
            }
        }

        //加载完浏览器后  调用connect（），打开双通道
        $(function () {
            //打开双通道
            connect()
        })

        //强制关闭浏览器  调用websocket.close（）,进行正常关闭
        window.onunload = function () {
            disconnect()
        }

        function connect() {

            var socket = new SockJS('http://localhost:8080/chat'); //连接SockJS的endpoint名称为"endpointOyzc"
            stompClient = Stomp.over(socket); //使用STMOP子协议的WebSocket客户端

            // 连接成功后
            stompClient.connect({}, function (frame) { //连接WebSocket服务端
                console.log('Connected:' + frame);

                //通过stompClient.subscribe订阅/topic/getResponse 目标(destination)发送的消息
                stompClient.subscribe('/topic/getResponse', function (response) {
                    console.log(response);
                    showResponse(JSON.parse(response.body));
                });
            });
        }

        // function sendName() {
        //     var name = $('#name').val();
        //     stompClient.send("/welcome", {}, JSON.stringify({
        //         'name': name
        //     }));
        //     //通过stompClient.send 向/welcome目标(destination)发送消息，这个实在控制器的@MessageMapping中定义的
        // }
        //关闭双通道
        function disconnect() {
            if (stompClient != null) {
                stompClient.disconnect();
            }
            console.log("Disconnected");
        }

        function showResponse(message) {
            var response = $("#response");
            response.append("<p>" + message + "</p>");
        }
    </script>
</body>


</html>